<template>
    <div class="page_container">
        <div class="page_container_scroll">
            <a-col>
                <div v-show="showList">
                    <a-card :bordered="false" class="mb-2">
                        <a-row :gutter="[16, 16]">
                            <template v-for="item in statusList">
                                <div class="box" @click="setPhase(item.phase)"
                                    :style="{ 'color': item.color ?? '', 'border': item.color ? '1px solid' : '' }">
                                    <a-col class="box-status ">{{ item.label }}</a-col>
                                    <p class="box-num">{{ item.value }}</p>
                                </div>
                            </template>

                        </a-row>
                    </a-card>
                    <a-card :bordered="false">
                        <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState"
                            class="ant-advanced-search-form">
                            <a-row :gutter="24">
                                <a-col :span="6">
                                    <a-form-item label="" name="phase">
                                        <a-select :getPopupContainer="trigger => trigger.parentNode" :max-tag-count="2" v-model:value="searchFormState.phase" mode="tags"
                                            placeholder="请选择项目阶段" :fieldNames="{ label: 'label', value: 'phase' }"
                                            :options="statusList"></a-select>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="4">
                                    <a-form-item label="" name="name">
                                        <a-input v-model:value="searchFormState.name" placeholder="请输入项目名称" />
                                    </a-form-item>
                                </a-col>



                                <a-col :span="4">
                                    <a-form-item label="" name="type">
                                        <a-select :getPopupContainer="trigger => trigger.parentNode" ref="select" v-model:value="searchFormState.type" :options="xmtypes"
                                            placeholder="请选择项目类型"></a-select>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="6">
                                    <a-form-item label="" name="createDate">
                                        <a-row>
                                            <a-range-picker v-model:value="searchFormState.createDate"
                                                style="width: 100%;" />
                                        </a-row>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="4">
                                    <a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
                                    <a-button style="margin: 0 8px" @click="reset">重置</a-button>
                                </a-col>
                            </a-row>
                        </a-form>
                        <s-table :scroll="{ x: 1300, }" ref="tableRef" :ellipsis="true" :data="loadData" bordered
                            :columns="columns" class="mb-2">

                            <template #bodyCell="{ column, record, index }">
                                <template v-if="column.key === 'index'">
                                    {{ index + 1 }}
                                </template>
                                <template v-if="column.key === 'type'">
                                    {{ xmtypes.find(x => x.value == record.type)?.label }}
                                </template>
                                <template v-if="column.key === 'stateText'">
                                    <stateTag :value="record.stateText" />
                                </template>
                                <template v-if="column.key === 'bidType'">
                                    {{ tbtypes.find(x => x.value == record.bidType)?.label }}
                                </template>

                                <template v-if="column.key === 'status'">
                                    <a-col :style="{ 'background-color': getColorByValue(record.status) }"
                                        class=" w-20 rounded text-center text-white">
                                        {{ progressOptions.find(item => item.value === record.status)?.label }}
                                    </a-col>
                                </template>

                                <template v-if="column.key === 'control'">
                                    <a-col>
                                        <a @click="pminfoOnOpen(record)">查看</a>
                                    </a-col>
                                </template>
                            </template>
                        </s-table>
                    </a-card>
                </div>
                <div v-show="!showList">
                    <info @onClose="onClose" ref="pminfoModel"></info>
                </div>
            </a-col>
        </div>
    </div>
</template>

<script setup name="steps">

import pmApi from '@/api/pm/pm/index'
import stateTag from '@/components/Task/stateTag.vue'
import info from './info.vue'
import { progressOptions, roles, tbtypes, xmtypes } from '@/utils/constants.js'
const tableRef = ref()
const showList = ref(true)
const pminfoModel = ref()
const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
const searchFormState = ref({
})
// 查询区域显示更多控制
const advanced = ref(false)
const toggleAdvanced = () => {
    advanced.value = !advanced.value
}
const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: 70,
    },
    {
        title: '项目编号',
        dataIndex: 'code',
        key: 'code',
        width: 150,
        align: 'center'
    },
    {
        title: '项目名称',
        dataIndex: 'name',
        key: 'name',
        width: 180,
        align: "center",
    },
    {
        title: '项目类型',
        dataIndex: 'type',
        key: 'type',
        width: 120,
        align: "center",
    },
    {
        title: '项目状态',
        dataIndex: 'stateText',
        key: 'stateText',
        width: 120,
        align: "center",
    },
    {
        title: '投标类型',
        dataIndex: 'bidType',
        key: 'bidType',
        width: 120,
        align: "center",
    },

    {
        title: '客户',
        dataIndex: 'custom',
        key: 'custom',
        width: 120,
        align: "center",
        ellipsis: true
    },

    // {
    //     title: '施工进度',
    //     dataIndex: 'progress',
    //     key: 'progress',
    //     width: 120,
    //     align: "center",
    // },
    {
        title: '项目经理',
        dataIndex: 'directorName',
        key: 'directorName',
        width: 120,
        align: "center",

    },
    {
        title: '立项时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 150,
        align: "center",
        ellipsis: true
    },
    // {
    //     title: '项目总预算',
    //     dataIndex: 'prototlebudget',
    //     key: 'prototlebudget',
    //     width: 120,
    //     align: "center",
    // },
    // {
    //     title: '实际成本',
    //     dataIndex: 'realcost',
    //     key: 'realcost',
    //     width: 120,
    //     align: "center",
    // },
    // {
    //     title: '预算偏差率',
    //     dataIndex: 'budgetuserate',
    //     key: 'budgetuserate', width: 120,
    //     align: "center",
    // },
    {
        title: '操作',
        dataIndex: 'control',
        key: 'control',
        width: 120,
        align: "center",
        fixed: "right"
    },
]

const statusList = [

    {
        label: '项目立项',
        phase: 0,
        value: 100,

    },
    {
        label: '成本预算',
        value: 100,
        phase: 1,
    },
    {
        label: '投标',
        value: 100,
        phase: 2,
    },
    {
        label: '合同签约',
        value: 100,
        color: "#FF7A3F",
        phase: 3,
    },
    {
        label: '项目实施',
        value: 100,
        phase: 4
    },
    {
        label: '预算超支',
        value: 100,
        color: "#FF7A3F",
        phase: 5,

    },
    {
        label: '进度跟踪',
        value: 100,
        phase: 6,

    },
    {
        label: '回款超期',
        value: 100,
        color: "#FF7A3F",
        phase: 7
    },
    {
        label: '项目终止',
        value: 100,
        phase: 8

    },
    {
        label: '项目完成',
        value: '1',
        phase: 9
    },
]

const reset = () => {
    searchFormState.value = {}
}
const loadData = (parameter) => {
    parameter.phase = searchFormState.value.phase?.join(",")
    return pmApi.proinfopage({ ...parameter }).then((res) => {
        return res
    })
}



const getColorByValue = (value) => {
    // 使用 find() 方法查找 value 对应的元素\
    if (value == null) {
        return "red";
    }
    const target = progressOptions.find(item => item.value === value);

    // 如果找到了对应元素，则返回其 color 属性；否则返回 null 或者默认颜色
    return target ? target.color : 'gray';
}

const remove = (record) => {
    pmApi.proinfodelete([{ "id": record.id }]).then(() => {
        tableRef.value.refresh(true)
    })
    console.log("remove id", record)
}
const pmedit = ref()
const pmdata = ref([])
const onOpen = (record) => {
    showList.value = false;
    pmedit.value.show(record)
}


const setPhase = (phase) => {
    if (!searchFormState.value.phase?.find(x => x == phase)) {
        searchFormState.value.phase = []
        searchFormState.value.phase.push(phase)
        tableRef.value.refresh(true)
    }
}

const onClose = () => {
    showList.value = true;
}


const pminfoOnOpen = (record) => {
    showList.value = false;
    pminfoModel.value.show(record)
}
const pminfoOnClose = () => {
    console.log("pminfo is close");


}
</script>
<style scoped>
.box {
    width: calc(10% - 10px);
    height: 100px;
    box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.1);
    border-radius: 3px 3px 3px 3px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    transition: transform .3s ease-in-out;
    cursor: pointer;
}

.box:hover {
    transform: scale(1.1);
}

.box-status {
    font-weight: 400;
    font-size: 14px;
    line-height: 36px;
    font-weight: 600;
}

.box-num {

    height: 32px;
    font-weight: bold;
    font-size: 24px;
    line-height: 48px;
    text-align: center;
}
</style>
